<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态显示列表</title>
</head>
<body>
    <!-- 练习内容：动态显示列表 -->
    <div id="container1"></div>
    <div id="container2"></div>
    <div id="container3"></div>
    <div id="container4"></div>

    <!-- 加载 React。-->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
    <script src="../js-react/react@16.development.js" crossorigin></script>
    <script src="../js-react/react-dom@16.development.js" crossorigin></script>
    <!-- babel.min.js用于解析将jsx语法转为js语法 -->
    <script src="../js-react/babel@6.min.js"></script>

    <!-- 加载我们的 React 组件。babel指定使用jsx语法-->
    <script type="text/babel">
        const data = ['Angular', 'React', 'Vue']
        const lidata = [<li>Angular</li>, <li>React</li>, <li>Vue</li>] // 此处也不加引号

        // 1. 创建虚拟DOM
        const VDOM1 = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    data  
                </ul>
            </div>
        )

        const VDOM2 = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {data}
                </ul>
            </div>
        )

        const VDOM3 = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {lidata}
                </ul>
            </div>
        )

        // 正确打开方式
        // 每个li的key保持唯一，key用于diffing算法中区分每个标签
        const VDOM4 = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {
                        data.map((it, idx) => {
                            return <li key={idx}>{it}</li>
                        })
                    }
                </ul>
            </div>
        )

        ReactDOM.render(VDOM1, document.getElementById('container1'))
        ReactDOM.render(VDOM2, document.getElementById('container2'))
        ReactDOM.render(VDOM3, document.getElementById('container3'))
        ReactDOM.render(VDOM4, document.getElementById('container4'))
    </script>
</body>
</html>